<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仿王者荣耀官方网站-内容中心</title>
    <link rel="stylesheet" href="../style/reset.css" />
    <link rel="stylesheet" href="../style/common.css" />
    <link rel="stylesheet" href="../style/page/content-center.css" />
  </head>
  <body>
    <div class="page-content-center">
      <div class="bg">
        <img src="../img/content-center/bg.jpg" alt="" />
      </div>
      <div class="menu-area">
        <div class="vertical-menu">
          <div class="vertical-menu__title vertical-menu__title--helmet">
            内容中心
          </div>
          <div class="vertical-menu__item active">
            <a href="#" class="btn">英雄攻略</a>
          </div>
          <div class="vertical-menu__item">
            <a href="#" class="btn">精品栏目</a>
          </div>
        </div>
      </div>
      <div class="video-list-area">
        <div class="big-title">攻略</div>
        <a href="#" class="video-item">
          <img
            src="../img/content-center/video-cover-1.jpg"
            class="video--cover"
            alt="" />
          <div class="video--mask">
            <img src="../img/content-center/icon-play.png" alt="" />
          </div>
          <p>反向放大？国一射手故氏教你苍应该这样玩！</p>
        </a>
        <a href="#" class="video-item">
          <img
            src="../img/content-center/video-cover-2.jpg"
            class="video--cover"
            alt="" />
          <div class="video--mask">
            <img src="../img/content-center/icon-play.png" alt="" />
          </div>
          <p>还不会超级跳？苍必学的四大技巧</p>
        </a>
      </div>
      <div class="hero-area">
        <div class="hero-select-wrapper">
          <div class="hero">
            <img
              src="../img/content-center/avator-1.jpg"
              alt=""
              class="hero__avator" />
            <span class="hero__name">苍</span>
          </div>
          <div>
            <img
              src="../img/content-center/icon-arrow-down.png"
              alt=""
              class="arrow" />
          </div>
        </div>
        <div class="hero-info-wrapper">
          <div class="hero-base-info">
            <div class="hero-poster">
              <img src="../img/content-center/person.jpg" alt="" />
            </div>
            <div class="hero-job">
              <img src="../img/content-center/icon-shooter.png" alt="" />
              <p>射手</p>
              <p class="small">游戏职业</p>
            </div>
            <div class="hero-name">
              <p class="race">苍狼末裔</p>
              <img src="../img/content-center/line.png" alt="" />
              <p>苍</p>
            </div>
            <div class="hero-skills">
              <div class="skill">
                <div class="border-image">
                  <img
                    src="../img/content-center/skill/skill-01.png"
                    alt="" />
                  <img
                    src="../img/content-center/skill/skill-bg.png"
                    class="circle-border"
                    alt="" />
                </div>
                <p class="txt">追猎</p>
                <div class="popup">
                  <div class="popup__top">
                    <div class="popup__top__left">
                      <img
                        src="../img/content-center/skill/skill-01.png"
                        alt="" />
                    </div>
                    <div class="popup__top__right">
                      <div class="title">追猎</div>
                      <p>冷却值：0<br />消耗：0</p>
                    </div>
                  </div>
                  <p>
                    苍处于草丛中时增加10%~20%移速，并积累潜伏值，1秒达到最大值。离开草丛时，消耗潜伏值进行一次跳跃，潜伏值越高，跳跃距离越远。<br />苍进入草丛会强化下次普攻为二连射，每支箭矢造成60%物理攻击伤害，二连射有4秒冷却时间。<br />苍处于草丛中时增加25%对野怪伤害。
                  </p>
                </div>
              </div>
              <div class="skill">
                <div class="border-image">
                  <img
                    src="../img/content-center/skill/skill-02.png"
                    alt="" />
                  <img
                    src="../img/content-center/skill/skill-bg.png"
                    class="circle-border"
                    alt="" />
                </div>
                <p class="txt">翔跃为号</p>
                <div class="popup">
                  <div class="popup__top">
                    <div class="popup__top__left">
                      <img
                        src="../img/content-center/skill/skill-02.png"
                        alt="" />
                    </div>
                    <div class="popup__top__right">
                      <div class="title">翔跃为号</div>
                      <p>冷却值：7.5/7.2/6.9/6.6/6.3/6<br />消耗：40</p>
                    </div>
                  </div>
                  <p>
                    苍翔跃至空中，期间加速并可以穿越地形。在空中进行普攻会射出远距离的强力一箭，造成250/300/350/400/450/500(+145%物理攻击)物理伤害并击退(无控制效果)敌人，同时延长自身在空中的时间。<br />每增加1%攻击速度，提升2点强力箭伤害。<br />若苍在空中没有释放强力一箭，则会落地后储存一个正常攻击距离的强普，持续3秒。<br />若空中射箭时左摇杆方向在与目标反方向，则自身在射箭后向左摇杆方向额外进行一小段反冲位移。
                  </p>
                </div>
              </div>
              <div class="skill">
                <div class="border-image">
                  <img
                    src="../img/content-center/skill/skill-03.png"
                    alt="" />
                  <img
                    src="../img/content-center/skill/skill-bg.png"
                    class="circle-border"
                    alt="" />
                </div>
                <p class="txt">狼魂陷阱</p>
                <div class="popup">
                  <div class="popup__top">
                    <div class="popup__top__left">
                      <img
                        src="../img/content-center/skill/skill-03.png"
                        alt="" />
                    </div>
                    <div class="popup__top__right">
                      <div class="title">狼魂陷阱</div>
                      <p>冷却值：2<br />消耗：50</p>
                    </div>
                  </div>
                  <p>
                    苍向指定位置投掷狼魂陷阱。敌人踩中后暴露视野并受到180/216/252/288/324/360(+70%物理攻击)物理伤害，同时在陷阱处召唤一只狼魂对触发者进行攻击。<br />未触发的陷阱落地2秒后隐身，最多同时布置4个陷阱。<br />狼魂继承苍25%基础属性和50%暴击效果，狼魂每次攻击会降低目标5%~10%移速，持续1秒，最多叠加5层。
                  </p>
                </div>
              </div>
              <div class="skill">
                <div class="border-image">
                  <img
                    src="../img/content-center/skill/skill-04.png"
                    alt="" />
                  <img
                    src="../img/content-center/skill/skill-bg.png"
                    class="circle-border"
                    alt="" />
                </div>
                <p class="txt">领袖姿态</p>
                <div class="popup">
                  <div class="popup__top">
                    <div class="popup__top__left">
                      <img
                        src="../img/content-center/skill/skill-04.png"
                        alt="" />
                    </div>
                    <div class="popup__top__right">
                      <div class="title">领袖姿态</div>
                      <p>冷却值：50/45/40<br />消耗：120</p>
                    </div>
                  </div>
                  <p>
                    苍激发领袖姿态，向指定方向召唤(2+二技能数量)只狼魂冲锋，消耗二技能储存数并激活周围所有陷阱。<br />苍自身获得骑射能力(可移动普攻)，提高10/15/20%移速、50/75/100点攻击和20/30/40%攻击速度，持续8秒。<br />苍每次普攻会激活当前无目标的狼魂进行协同攻击。
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="hero-other-info">
            <div class="recommend-area">
              <div class="big-title big-title--helmet">推荐出装</div>
              <ul class="tabs">
                <li class="tab active">推荐出装一</li>
                <li class="tab">推荐出装二</li>
              </ul>
              <ul class="recommend-content">
                <li class="item">
                  <div class="border-image">
                    <img
                      src="../img/content-center/skill/skill-05.png"
                      alt="" />
                    <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                  <div class="popup">
                    <div class="popup__top">
                      <div class="popup__top__left">
                        <img
                          src="../img/content-center/skill/skill-05.png"
                          alt="" />
                      </div>
                      <div class="popup__top__right">
                        <div class="title">急速战靴</div>
                        <p>售价：426<br />总价：710</p>
                      </div>
                    </div>
                    <p>
                      +20%攻速<br /><br />唯一被动：+60移动速度（所有鞋类装备的移速加成效果不叠加）<br />被动-急速恢复：近战/远程英雄每次普攻行为回复30/40点生命(对非英雄单位减半)
                    </p>
                  </div>
                </li>
                <li class="item">
                  <div class="border-image">
                    <img
                      src="../img/content-center/skill/skill-06.png"
                      alt="" />
                    <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                  <div class="popup">
                    <div class="popup__top">
                      <div class="popup__top__left">
                        <img
                          src="../img/content-center/skill/skill-06.png"
                          alt="" />
                      </div>
                      <div class="popup__top__right">
                        <div class="title">影刃</div>
                        <p>售价：1242<br />总价：1950</p>
                      </div>
                    </div>
                    <p>
                      +35%攻击速度<br />+25%暴击率<br />+5%移速<br /><br />被动-暴风：普攻伤害提升40点，暴击后增加20%攻速和5%移速，持续3秒
                    </p>
                  </div>
                </li>
                <li class="item">
                  <div class="border-image">
                    <img
                      src="../img/content-center/skill/skill-07.png"
                      alt="" />
                    <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                  <div class="popup">
                    <div class="popup__top">
                      <div class="popup__top__left">
                        <img
                          src="../img/content-center/skill/skill-07.png"
                          alt="" />
                      </div>
                      <div class="popup__top__right">
                        <div class="title">无尽战刃</div>
                        <p>售价：1284<br />总价：2140</p>
                      </div>
                    </div>
                    <p>
                      +110物理攻击<br />+20%暴击率<br /><br />被动-无尽：获得20%暴击效果，每2%暴击增加1%暴击效果，最多不超过50%
                    </p>
                  </div>
                </li>
                <li class="item">
                  <div class="border-image">
                    <img
                      src="../img/content-center/skill/skill-08.png"
                      alt="" />
                    <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                  <div class="popup">
                    <div class="popup__top">
                      <div class="popup__top__left">
                        <img
                          src="../img/content-center/skill/skill-08.png"
                          alt="" />
                      </div>
                      <div class="popup__top__right">
                        <div class="title">破晓</div>
                        <p>售价：2040<br />总价：2760</p>
                      </div>
                    </div>
                    <p>
                      +50物理攻击<br />+30%攻击速度<br />+10%暴击率<br /><br />被动-破甲：+15%物理穿透（远程英雄使用时效果翻倍）<br />被动-破晓：普通攻击伤害提升50点（远程英雄使用时效果翻倍）
                    </p>
                  </div>
                </li>
                <li class="item">
                  <div class="border-image">
                    <img
                      src="../img/content-center/skill/skill-09.png"
                      alt="" />
                    <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                  <div class="popup">
                    <div class="popup__top">
                      <div class="popup__top__left">
                        <img
                          src="../img/content-center/skill/skill-09.png"
                          alt="" />
                      </div>
                      <div class="popup__top__right">
                        <div class="title">逐日之弓</div>
                        <p>售价：1230<br />总价：2050</p>
                      </div>
                    </div>
                    <p>
                      +25%攻击速度<br />+10%暴击率<br />+5%移速<br /><br />唯一被动-精准：普通攻击伤害提升50点，远程英雄使用时该效果翻倍。<br />唯一主动-逐日：增加自己125点普攻射程和20%移动速度，持续5秒，冷却时间：60秒（增加射程效果仅远程英雄生效）
                    </p>
                  </div>
                </li>
                <li class="item">
                  <div class="border-image">
                    <img
                      src="../img/content-center/skill/skill-10.png"
                      alt="" />
                    <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                  <div class="popup">
                    <div class="popup__top">
                      <div class="popup__top__left">
                        <img
                          src="../img/content-center/skill/skill-10.png"
                          alt="" />
                      </div>
                      <div class="popup__top__right">
                        <div class="title">泣血之刃</div>
                        <p>售价：1080<br />总价：1800</p>
                      </div>
                    </div>
                    <p>
                      +100物理攻击<br />+25%物理吸血<br />+500 最大生命<br /><br />被动-回魂：自身生命低于30%时，5秒内累计回复400~610点生命，该效果有20秒的冷却时间
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="suggestion-area">
              <div class="big-title big-title--bulb">推荐加点建议</div>
              <ul class="suggestion__content">
                <li class="item">
                  <div class="txt">
                    <p class="title">主升</p>
                    <p>翔跃为号</p>
                  </div>
                  <div class="img-wrapper border-image">
                    <img
                      src="../img/content-center/skill/skill-02.png"
                      alt="" />
                      <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                </li>
                <li class="item">
                  <div class="txt">
                    <p class="title">主升</p>
                    <p>狼魂陷阱</p>
                  </div>
                  <div class="img-wrapper border-image">
                    <img
                      src="../img/content-center/skill/skill-03.png"
                      alt="" />
                      <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                </li>
                <li class="item">
                  <div class="txt">
                    <p class="title">召唤师技能</p>
                    <p>闪现/惩击</p>
                  </div>
                  <div class="img-wrapper border-image">
                    <img
                      src="../img/content-center/skill/skill-11.png"
                      alt="" />
                      <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                  <div class="img-wrapper border-image">
                    <img
                      src="../img/content-center/skill/skill-12.png"
                      alt="" />
                      <img
                      src="../img/content-center/skill/skill-bg.png"
                      class="circle-border"
                      alt="" />
                  </div>
                </li>
              </ul>
            </div>
            <div class="relationship-area">
              <div class="big-title big-title--group">英雄关系</div>
              <ul class="tabs">
                <li class="tab active">最佳搭档</li>
                <li class="tab">压制英雄</li>
                <li class="tab">被压制英雄</li>
              </ul>
              <div class="relationship-content">
                <div class="icon">
                  <img
                    src="../img/content-center/icon-group-2.png"
                    alt="" />
                </div>
                <div class="relationship">最佳搭档</div>
                <div class="avator active">
                  <img
                    src="../img/content-center/avator-2.jpg"
                    alt="" />
                </div>
                <div class="avator">
                  <img
                    src="../img/content-center/avator-3.jpg"
                    alt="" />
                </div>
                <p class="desc"> 桑启提供草丛并且可以回复能力，能够提升苍的输出能力以及更容易触发被动 </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="shortcut">
        <iframe src="./快捷图标.html" style="width: 330px; height: 130px;"></iframe>
      </div>
    </div>
  </body>
</html>
